import { HtmlNode, HtmlNodeModel } from "@logicflow/core";

class TaskNodeModel extends HtmlNodeModel {
  setAttributes() {
    this.text.editable = false; // 禁止节点文本编辑
    // 设置节点宽高和锚点
    const width = 230;
    const height = 90;
    this.width = width;
    this.height = height;
    this.anchorsOffset = [
      [width / 2, 0],
      [0, height / 2],
      [-width / 2, 0],
      [0, -height/2],
    ]

    /// group 会影响菜单功能
    const { properties: { isDisabledNode, isShow } } = this;

    // isShow, parent_id
    this.visible = isShow
    if (isDisabledNode) {
      this.draggable = false
    }

    if (!isDisabledNode) {
      this.menu = [
        {
          text: '删除',
          className: 'lf-menu-delete',
          icon: true,
          callback: (node) => {
            this.graphModel.deleteNode(node.id);
            this.graphModel.eventCenter.emit('task:delete', node);
          },
        },
        {
          text: '编辑',
          className: 'lf-menu-item',
          callback: (node) => {
            this.graphModel.eventCenter.emit('task:edit', node);
          },
        },
      ];
    } else {
      this.menu = [
        {
          text: '编辑',
          className: 'lf-menu-item',
          callback: (node) => {
            this.graphModel.eventCenter.emit('task:edit', node);
          },
        }
      ]
    }
  }
}

class TaskNode extends HtmlNode {
  setHtml(rootEl) {
    const { properties } = this.props.model;

    const el = document.createElement('div');
    el.className = `task-node ${properties.type ? properties.type : ''}`;
    const html = `
      <div class="num">${properties.num}</div>
      <div class="body">
        <div class="icon">
          <span class="iconfont icon-a-dashujushujujiegouguanxiguanxifenxigongtonglianxirenzuzhi"></span>
        </div>
        <div class="name" title="${properties.name}">${properties.name}</div>
        <div class="btn">${properties.type === 'init' ? '' : '详情'}</div>
      </div>
    `
    el.innerHTML = html;
    // 需要先把之前渲染的子节点清除掉。
    rootEl.innerHTML = '';
    rootEl.appendChild(el);
  }
}

const task = {
  type: 'task',
  view: TaskNode,
  model: TaskNodeModel
}

export default task;